import React from 'react'
import {Card} from 'primereact/card'
import {ProgressBar} from 'primereact/progressbar'
import {Button} from 'primereact/button'
import {Dialog} from 'primereact/dialog'

import ResourcesDlog from './dlog/resourcesDlog'

class OverView extends React.Component{
  constructor(){
    super()

    this.state={
      money:{
        name:'资产',
        count:34.39
      },
      balance:{
        name:'余额',
        count:4.8152
      },
      delegate:{
        name:'抵押',
        count:3.5000
      },
      refund:{
        name:'赎回中',
        count:0.000
      },
      ram:{
        name:'内存',
        percent:11.01,
        available:{
          name:'全网',
          value:[6.64,60.32]
        },
        total:[44.87,72.58],
        priceName:'价格',
        price:{
          name:'价格',
          value:0.15
        }
      },
      cpu:{
        name:'CPU',
        percent:15,
        available:[1.67,5.51],
        delegate:{
          name:'抵押',
          value:2.5
        },
        refund:{
          name:'赎回',
          value:0
        }
      },
      net:{
        name:'网络',
        percent:15,
        available:[0.27, 664.56],
        delegate:{
          name:'抵押',
          value:1
        },
        refund:{
          name:'赎回',
          value:0
        }
      },
      block:{
        name:'区块',
        value:9894544
      },
      transfer:{
        name:'交易',
        value:9894544
      },
      consume:{
        name:'消费',
        value:9894544
      },
      account:{
        name:'账户',
        value:9894544
      },
      resourcesVisible:false
    }
  }
  render(){
    return (
      <div className="p-g">
          <div className="p-g-3">
            <Card style={{background:'#0fd2b1',color:'#fff',textAlign:'center'}}>
              <p>{this.state.money.name}</p>
              <p>{'$'+this.state.money.count}</p>
            </Card>
          </div>
          <div className="p-g-3">
            <Card style={{background:'#51cefc',color:'#fff',textAlign:'center'}}>
              <p>{this.state.balance.name}</p>
              <p>{this.state.balance.count+'EOS'}</p>
            </Card>
          </div>
          <div className="p-g-3">
            <Card style={{background:'#51a7fc',color:'#fff',textAlign:'center'}}>
              <p>{this.state.delegate.name}</p>
              <p>{this.state.delegate.count.toFixed(3)}</p>
            </Card>
          </div>
          <div className="p-g-3">
            <Card style={{background:'#6f90f5',color:'#fff',textAlign:'center'}}>
              <p>{this.state.refund.name}</p>
              <p>{this.state.refund.count.toFixed(3)}</p>
            </Card>
          </div>

          <div className="p-g-4">
            <Dialog
              visible={this.state.resourcesVisible} 
              width="700px" 
              modal={true} 
              onHide={(e) => this.setState({resourcesVisible: false})}
            >
              <ResourcesDlog />
            </Dialog>

            <Card style={{background:'#f2f2f2',textAlign:'center'}}>
              <h2>{this.state.ram.name}</h2>
              <ProgressBar value={this.state.ram.percent} />
              <p>
                {this.state.ram.available.name+'：'+this.state.ram.available.value[0]+'/'+this.state.ram.available.value[1]}
              </p>
              <p>{this.state.ram.price.name+'：'+this.state.ram.price.value}</p>
              <div className="p-g">
                <div className="p-g-3"></div>
                <div className="p-g-3">
                  <Button label='购买' className="p-button-raised p-button-rounded"
                  onClick={(e) => this.setState({resourcesVisible: true})} />
                </div>
                <div className="p-g-3">
                  <Button label='出售' className="p-button-raised p-button-rounded"
                  onClick={(e) => this.setState({resourcesVisible: true})} />
                </div>
                <div className="p-g-3"></div>
              </div>
            </Card>
          </div>

          <div className="p-g-4">
            <Card style={{background:'#f2f2f2',textAlign:'center'}}>
              <h2>{this.state.cpu.name}</h2>
              <ProgressBar value={this.state.cpu.percent} />
              <p>
                {this.state.cpu.delegate.name+'：'+this.state.cpu.delegate.value}
              </p>
              <p>{this.state.cpu.refund.name+'：'+this.state.cpu.refund.value}</p>
              <div className="p-g">
                <div className="p-g-3"></div>
                <div className="p-g-3">
                  <Button label='抵押' className="p-button-raised p-button-rounded"/>
                </div>
                <div className="p-g-3">
                  <Button label='赎回' className="p-button-raised p-button-rounded"/>
                </div>
                <div className="p-g-3"></div>
              </div>
            </Card>
          </div>

          <div className="p-g-4">
            <Card style={{background:'#f2f2f2',textAlign:'center'}}>
              <h2>{this.state.net.name}</h2>
              <ProgressBar value={this.state.net.percent} />
              <p>
                {this.state.net.delegate.name+'：'+this.state.net.delegate.value}
              </p>
              <p>{this.state.net.refund.name+'：'+this.state.net.refund.value}</p>
              <div className="p-g">
                <div className="p-g-3"></div>
                <div className="p-g-3">
                  <Button label='抵押' className="p-button-raised p-button-rounded"/>
                </div>
                <div className="p-g-3">
                  <Button label='赎回' className="p-button-raised p-button-rounded"/>
                </div>
                <div className="p-g-3"></div>
              </div>
            </Card>
          </div>

          <div className="p-g-12">
            <div className="p-g-3" style={{background:'#f2f2f2'}}>
              <p style={{textAlign:'center'}}>{this.state.block.name+'：'+this.state.block.value}</p>
            </div>
            <div className="p-g-3" style={{background:'#f2f2f2'}}>
              <p style={{textAlign:'center'}}>{this.state.transfer.name+'：'+this.state.transfer.value}</p>
            </div>
            <div className="p-g-3" style={{background:'#f2f2f2'}}>
              <p style={{textAlign:'center'}}>{this.state.consume.name+'：'+this.state.consume.value}</p>
            </div>
            <div className="p-g-3" style={{background:'#f2f2f2'}}>
              <p style={{textAlign:'center'}}>{this.state.account.name+'：'+this.state.account.value}</p>
            </div>
          </div>
      </div>
    )
  }
}

export default OverView